<template>
	<div class="container">
		<div class="formbox">
			<div class="formboxleft">
				<div class="top">
					<img src="https://kst.zhentaojiaoyu.com/img/logozt.515d31bd.png" alt="" />
				</div>
				<div class="center">
					<h1>学生思维体系考试平台</h1>
				</div>
				<div class="but">
					<h1>产教融合型大学</h1>
					<p>
						以行业要求为标准，以产教融合的教育模式为核心，通过教育思想的革命，教育内容的精进以及教育方法的创新，培养思维模式先进、通识知识宽广、专业知识深厚以及应用能力熟练的一流人才的大学。
					</p>
				</div>
			</div>
			<div class="formboxright">
				<h1>学生思维体系考试平台登录</h1>
				<a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish" @finishFailed="onFinishFailed">
					<a-form-item name="username" :rules="[{ required: true, message: '请输入账号!' }]">
						<a-input v-model:value="formState.username" placeholder="账号">
							<template #prefix>
								<UserOutlined class="site-form-item-icon" />
							</template>
						</a-input>
					</a-form-item>

					<a-form-item name="password" :rules="[{ required: true, message: '请输入身份证号或密码!' }]">
						<a-input-password v-model:value="formState.password" placeholder="身份证号或密码">
							<template #prefix>
								<LockOutlined class="site-form-item-icon" />
							</template>
						</a-input-password>
					</a-form-item>

					<a-form-item>
						<a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">登录</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>
  
<script setup lang="ts">
import { reactive, computed } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useLoginApi } from '/@/api/stulogin';
interface FormState {
	username: string;
	password: string;
}
const formState = reactive<FormState>({
	username: '',
	password: '',
});
const onFinish = (values: any) => {
	if (values.username.length > 4) {
		console.log("1")
		console.log({ ...formState })
		useLoginApi()
			.teacherLogin({ ...formState })
			.then((res) => {
				console.log('res', res);
			})
			.catch((err) => {
				console.log('err', err);
			});
	} else {
		console.log("2")
		console.log({ ...formState })
		useLoginApi()
			.studentLogin({ ...formState })
			.then((res) => {
				console.log('res', res);
			})
			.catch((err) => {
				console.log('err', err);
			});
	}
};

const onFinishFailed = (errorInfo: any) => {
	console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
	return !(formState.username && formState.password);
});
</script>
  
<style scoped lang="less">
.container {
	background-color: #f2f6ff;
	height: 100vw;
	height: 100vh;
	.formbox {
		position: absolute;
		width: 1000px;
		height: 550px;
		background-color: #fff;
		border-radius: 10px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		.formboxleft {
			flex: 3;
			background: url(https://s2.kaoshixing.com/static/account/images/login_reg/admin-login-bg.png?v=55e538df9f) no-repeat;
			background-size: 100%;
			border-radius: 10px 0px 0px 10px;
			padding: 10px;
			color: #fff;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			.top {
				img {
					margin: 2px 8px;
					height: 55px;
				}
			}
			.center {
				h1 {
					color: #fff;
					font-size: 38px;
					text-align: center;
				}
			}
			.but {
				margin: 0 auto;
				width: 450px;
				margin-bottom: 20px;
				h1 {
					color: #fff;
					font-size: 18px;
					font-weight: 700;
				}
				p {
					text-indent: 2em;
					font-size: 18px;
				}
			}
		}
		.formboxright {
			flex: 2;
			border-radius: 0px 10px 10px 0px;
			padding: 10px;
			margin: 120px 0;
			h1 {
				color: #31507e;
				font-weight: 700;
				font-size: 18px;
				text-align: center;
				margin-bottom: 20px;
			}
			.login-form {
				max-width: 300px;
				margin: 0 auto;
			}
			.login-form-forgot {
				float: right;
			}
			.login-form-button {
				width: 100%;
			}
		}
	}
}
</style>